
//- This source code is licensed under the terms of the
//- GNU Affero General Public License found in the LICENSE file in
//- the root directory of this source tree.
//-
//- Copyright (c) 2021-present Kaleidos INC

.epic-row.e2e-epic-row(
    ng-class="{'is-blocked':  vm.epic.get('is_blocked'), 'is-closed': vm.epic.get('is_closed'), 'unfold': vm.displayUserStories, 'not-empty': vm.epic.getIn(['user_stories_counts', 'opened']) || vm.epic.getIn(['user_stories_counts', 'closed'])}"
    ng-click="vm.toggleUserStoryList()"
    ng-hide="!vm.options.closed && vm.epic.get('is_closed')"
)
    tg-svg.icon-drag(
        svg-icon="icon-draggable"
        ng-if="vm.canEditEpics()"
    )

    .name(ng-if="vm.options.name")
        .fold-us
            tg-svg(
                svg-icon="icon-chevron-down"
                ng-if="vm.epic.getIn(['user_stories_counts', 'total'])"
            )
        span.epic-pill(
            ng-style="::{'background-color': vm.epic.get('color')}"
        )
        - var hash = "#";
        a(
            tg-nav="project-epics-detail:project=vm.project.slug,ref=vm.epic.get('ref')"
            ng-attr-title="{{::vm.epic.get('subject')}}"
        )
            span.ref(ng-bind-html="'#'+vm.epic.get('ref')")
            span.subject(ng-bind-html="vm.epic.get('subject') | emojify")

    .project(ng-if="vm.options.project")

    .sprint(ng-if="vm.options.sprint")

    .assigned.e2e-assigned-to(
        ng-if="vm.options.assigned && vm.epic.get('assigned_to')"
    )
        img(
            tg-avatar="vm.epic.get('assigned_to_extra_info')"
        )
    .assigned(
        ng-if="vm.options.assigned && !vm.epic.get('assigned_to')"
    )
        img(
            src="#{v}/images/unnamed.png"
            alt="{{EPICS.DASHBOARD.UNASSIGNED | translate}}"
        )
    .status-holder(
        ng-if="vm.options.status && !vm.canEditEpics()"
    )
        span {{vm.epic.getIn(['status_extra_info', 'name'])}}
    .status-holder(
        ng-if="vm.options.status && vm.canEditEpics()"
        ng-mouseleave="vm.displayStatusList = false"
        tg-isolate-click
    )
        button(
            ng-click="vm.displayStatusList = true"
            ng-style="{'color': vm.epic.getIn(['status_extra_info', 'color'])}"
            tg-loading="vm.loadingStatus"
        )
            span.e2e-epic-status {{vm.epic.getIn(['status_extra_info', 'name'])}}
            tg-svg(
                svg-icon="icon-arrow-down"
            )

        ul.epic-statuses(ng-if="vm.displayStatusList")
            li.status.e2e-edit-epic-status(
                ng-repeat="status in vm.project.epic_statuses | orderBy:'order'"
                ng-click="vm.updateStatus(status.id)"
            )
                span.item-text {{status.name}}

    .progress(ng-if="vm.options.progress")
        .progress-bar
        .progress-status(
            ng-if="::vm.percentage"
            ng-style="{'width':vm.percentage}"
        )

.epic-stories-wrapper(ng-if="vm.displayUserStories && vm.epicStories")
    .epic-story(tg-repeat="story in vm.epicStories track by story.get('id')")
        tg-story-row.e2e-story(
            story="story"
            options="vm.options"
        )
